<template>
	<view class="container">
		<!-- <button @click="test">根据角色id获取用户id</button> -->
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" 
			:collection="colList" :options="options" loadtime='onready'
			 :getone="true" :where="queryWhere">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="loading">
				<uni-load-more :contentText="loadMore" status="loading"></uni-load-more>
			</view>
			<view v-else-if='data'>
				<view @click="aaa(data)">
					<text>分类:</text>
					<text>{{data.category_id.length!=0?data.category_id[0].name:'未分类'}}</text>
				</view>
				<view>
					<text>标题:</text>
					<text>{{data.title}}</text>
				</view>
				<view>
					<text>文章内容:</text>
					<rich-text class="" :nodes="data.content"></rich-text>  
				</view>
				<view>
					<text>文章摘录:</text>
					<text>{{data.excerpt}}</text>
				</view>
				<view>
					<text>文章状态:</text>
					<text>{{options.article_status_valuetotext[data.article_status]}}</text>
				</view>
				<view>
					<text>开放评论:</text>
					<text>{{options.comment_status_valuetotext[data.comment_status]}}</text>
				</view>
				<view>
					<text>封面大图:</text>
					<text>{{data.avatar}}</text>
				</view>
				<view>
					<text>发表时间:</text>
					<uni-dateformat :date="data.publish_date" :threshold="[0, 0]" />
				</view>
				<view>
					<text>最后修改时间:</text>
					<uni-dateformat :date="data.last_modify_date" :threshold="[0, 0]" />
				</view>
				<view class="" style="padding: 30rpx;display: flex;justify-content: space-around;">
					<view class="" @click="handleArtical(data._id,data.like_count,data)">
						<!-- 该用户是否对该文章进行了点赞 -->
						<uni-icons type="hand-up-filled" :color="islike_count?'red':'#000'"></uni-icons>
						<!-- 该文章的点赞总数 -->
						<text>{{data.like_count}}</text>
					</view>
					<view class="" @click="commentArtical(data._id,data.comment_count,data.comment_status,data.user_id)">
						<uni-icons type="chatbubble-filled" :color="UserComment?'red':'#000'"></uni-icons>
						<text>{{data.comment_count}}</text>
					</view>
					<view class="">
						<text>阅读量</text>
						<text>{{data.view_count}}</text>
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;">
					<uni-easyinput v-model="comment" placeholder="输入你对这篇文章的看法" style="flex:1;margin-right: 20rpx;"
					:disabled='filterAbled(data.comment_status)'/>
					<text @click="complete(data._id,data.comment_count,data.comment_status,data)">完成</text>
				</view>
				<view class="btns">
					<button type="primary" @click="handleUpdate(data.user_id)">修改</button>
					<button type="warn" class="btn-delete" @click="handleDelete(data.user_id)">删除</button>
				</view>
			</view>
		</unicloud-db>
		<view class="comment_container" v-if="commentList.length!=0">
			<text>评论列表:</text>
			<view class="" v-for="(item,index) in commentList" :key="item._id">
				<!-- 只显示针对文章的评论  -->
				<view class="comment-item" v-if="item.comment_type==0&&!item.isShow">
					<view class="comment_avatar">
						<image :src="item.userList[0].avatar?item.userList[0].avatar:'../../static/image/mine1.png'" mode="aspectFit" class="image"></image>
					</view>
					<view class="comment_infor" >
						<view class="top">
							<text class="font_title">{{item.userList[0].username}}</text>
							<view class="dianzan" @click="dianzanComment(item._id,item.commetLike,item.article_id,item)">
								<uni-icons type="hand-up-filled" size="24" class='icon'
								:color="filterStatus(item.commetLike)?'red':''"></uni-icons>
								<text class="dianzancount">{{item.like_count}}</text>
							</view>
						</view>
						<view class="content">
							<text :class="item.userList[0]._id==infor.uid?'active':''">{{item.comment_content}}</text>
						</view>
						<view class="otherinfor">
							<uni-dateformat :date="item.comment_date" :threshold = "[60000, 3600000]"
							format='yyyy/MM/dd hh:mm' class="time font_title"></uni-dateformat>
							<text class="ip font_title">{{item.comment_ip}}</text>
							<view class="reply" @click="reply(item._id,item.article_id,item.userList[0]._id,item)">
								<text>{{item.secondComment}}</text>
								<text class="reply_text">回复</text>
							</view>
							<uni-icons type="trash" size="18" color="#999" @click="delComment('artical_comemnt',item._id,item.article_id)"
							v-if="item.userList[0]._id==infor.uid"></uni-icons>
						</view>
						<view class="" style='background:#f8f8f8;width:100%;'>
							<view class="reply_comment" v-for="(s_item,index1) in item.children" :key="s_item._id">
								<view class="comment_avatar">
									<image :src="s_item.userList[0].avatar?s_item.userList[0].avatar:'../../static/image/mine1.png'" mode="aspectFit" class="image"></image>
								</view>
								<view class="comment_infor">
									<view class="top">
										<text class="font_title">{{s_item.userList[0].username}}</text>
										<view class="dianzan" @click="dianzanComment(s_item._id,s_item.commetLike,s_item.article_id,s_item)">
											<uni-icons type="hand-up-filled" size="24" class='icon'
											:color="filterStatus(s_item.commetLike)?'red':''"></uni-icons>
											<text class="dianzancount">{{s_item.like_count}}</text>
										</view>
										<uni-icons type="trash" size="18" color="#999" @click="delComment('reply_comment',s_item._id,s_item.article_id,index,index1,item)"
										v-if="s_item.userList[0]._id==infor.uid"></uni-icons>
									</view>
									<view class="content">
										<text style="color: blue;margin-right: 10rpx;">回复{{s_item.replycommentList[0].username}}:</text>
										<text>{{s_item.comment_content}}</text>
										<uni-dateformat :date="s_item.comment_date" :threshold = "[60000, 3600000]" style='margin-left:10rpx;'
										format='yyyy/MM/dd hh:mm' class="time font_title"></uni-dateformat>
									</view>
								</view>		
							</view>	
							<view class="checkreply" v-if="item.children.length<item.secondComment" @click='getSecondReply(item._id,index)'>
								<text>查看其它回复 {{item.secondComment?item.secondComment - item.children.length:0}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="checkreply articalReply" @click='getMoreComment'>
			<text>查看更多评论</text>
		</view>
	</view>
</template>

<script>
	import { resolve } from 'path';
import {mapGetters} from 'vuex'
	// 由schema2code生成，包含校验规则和enum静态数据
	import {
		enumConverter
	} from '../../js_sdk/validator/opendb-news-articles.js';
	const db = uniCloud.database();
	const add = uniCloud.importObject('addInc') //第一步导入云对象
	export default {
		data() {
			return {
				colList:[
					db.collection('opendb-news-articles').getTemp(),
					db.collection('opendb-news-categories').getTemp()
				],
				queryWhere: '',
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				options: {
					// 将scheme enum 属性静态数据中的value转成text
					...enumConverter
				},
				comment:'',//评论的内容
				UserComment:false,//该用户是否有评论该文章
				islike_count:false,
				commentList:[],//该文章的所有评论
				pageArr:[],//存储二级评论的分页信息
				page:0,
			}
		},
		computed:{
			...mapGetters({
				infor:'user/info'
			})
		},
		async onLoad(e) {
			this._id = e.id
			// 多张表联查
			let artical=await db.collection('opendb-news-articles').where(`_id=="${e.id}"`).getTemp()
			let categories=await db.collection('opendb-news-categories').getTemp()
			let like=await db.collection('opendb-news-like').where({
				user_id:db.getCloudEnv('$cloudEnv_uid'),//当前用户uid
				article_id:e.id
			}).getTemp()
			// 当前用户是否对文章做过点赞和评论
			this.handleUser_artical(artical,categories,like)
			// 获取文章评论信息
			this.getComment()
			// 新增阅读量，不需要将总数查询+1，直接对该字段+1
			this.addViewcount(e.id)
		},
		onReady() {
			if (this._id) {
				this.queryWhere = '_id=="' + this._id + '"'
				// _id==="this._id"
			}
		},
		methods: {
			aaa(data){
				console.log(data)
			},
			// 当前用户是否对文章做过点赞和评论
			async handleUser_artical(artical,categories,like){
				let user=await db.collection('uni-id-users').field('_id,username,avatar,register_ip').getTemp()
				let comments=await db.collection('opendb-news-comments').where({
					article_id:this._id,
					isShow:false,//评论未被删除的
					// comment_type:0
				}).getTemp()
				let data=await db.collection(artical,categories,user,like,comments).get({
					getOne:true
				})
				// 当前用户是否对该文章有点赞
				this.islike_count=data.result.data._id["opendb-news-like"].length==1?true:false
				// 当前用户是否对该文章有评论
				data.result.data._id["opendb-news-comments"].forEach(item=>{
					// 当前用户是否针对文章评论过
					if(item.user_id==this.infor.uid&&item.comment_type==0){
						this.UserComment=true
						return
					}
				})
			},
			// 新增文章阅读量
			addViewcount(id){
				add.addInc('opendb-news-articles','view_count',id,1).then(res=>{
					console.log(res)
				}).catch(err=>{
					console.log(err)
				})
			},
			// 根据一级评论id获取相关的二级数据
			async getSecondReply(commentId,index){
				let pageIndex=this.pageArr.findIndex(item=>item._id==commentId)
				let user=await db.collection('uni-id-users').field('_id,username,avatar,register_ip').getTemp()
				let comments=await db.collection('opendb-news-comments').where({
					article_id:this._id,
					reply_comment_id:commentId,
					comment_type:1,
					isShow:false,
				}).getTemp()
				// 评论点赞表
				let commentlike=await db.collection('comments-like').getTemp()
				// 查询该文章的评论和评论的用户信息
				let res=await db.collection(comments,user,commentlike)
				.field('reply_user_id as replycommentList,user_id as userList,_id["comments-like"] as commetLike,_id._value as _id,article_id,comment_content,comment_date,comment_ip,comment_type,isShow,like_count,reply_comment_id')
				.orderBy('comment_date desc')
				.skip(this.pageArr[pageIndex].page *2)
				.limit(2)
				.get({getCount:true})
				console.log(res,res.result.data,'xxx')
				if(res.result.affectedDocs==0){
					uni.showToast({
						title:'无更多数据',
						icon:'none'
					})
				}else{
					this.pageArr[pageIndex].page++
					console.log(this.pageArr[pageIndex].page)
					// this.commentList[index].children=res.result.data
					let arr1=[]
					let newArr=[]
					let data=[...this.commentList[index].children,...res.result.data]
					// console.log(data)
					// 将重复数据过滤
					data.forEach(item=>{
						if(arr1.indexOf(item._id)==-1){
							arr1.push(item._id);
							newArr.push(item);
						}
					})
					console.log(newArr)
					this.commentList[index].children=newArr
				}
				// this.commentList[index].children=res.result.data
				// this.commentList[index].children=Array.from(new Set([...this.commentList[index].children, ...res.result.data]));
				// this.commentList[index].children=[...this.commentList[index].children,...res.result.data]
			},
			// 获取文章评论信息
			async getComment(limit=2,secondLimit=2,page=0,mark=1){
				console.log(limit,page,mark)
				// return
				// 使用lookup进行联表查询
				uniCloud.callFunction({
					name: 'traditionaltype',
					data: { article_id:this._id,limit,secondLimit,page}
				})
				.then(res => {
					console.log(res,res.result.data,1236)
					if(res.result.affectedDocs==0){
						uni.showToast({
							title:'无数据',
							icon:'none'
						})
					}else{
						if(mark==1){//数据重新刷新
							this.page=0
							this.page++
							this.commentList=res.result.data
						}else{// 数据合并
							this.page++
							this.commentList=[...this.commentList,...res.result.data]
						}
						// 根据一级评论的数据进行二级评论的分页
						this.pageArr=[]//先清空，避免重复push
						this.commentList.forEach(item=>{
							this.pageArr.push({
								_id:item._id,
								page:1
							})
						})
						console.log(this.pageArr)
					}
				});
			},
			// 获取更多文章评论
			getMoreComment(){
				this.getComment(2,2,this.page,0)
			},
			// 评论是否禁用
			filterAbled(status){
				if(!status){
					return true
				}else{
					return false
				}
			},	
			// 当前用户是否对评论点赞过 
			filterStatus(data){
				// console.log(data,this.infor.uid,698)
				var index = data.findIndex(item => item.user_id=== this.infor.uid)
				if(index==-1){
					return false
				}else{
					return true
				}
			},
			// 点赞某条评论
			async dianzanComment(comment_id,data,article_id,resulte){
				console.log(comment_id,data,article_id,resulte)
				// return
				var index = data.findIndex(item => item.user_id=== this.infor.uid)
				// 判断当前用户是否点赞过
				if(index!=-1){ //点过赞
					//点赞总数-1 
					add.addInc('opendb-news-comments','like_count',comment_id,-1)
					let res=await db.collection('comments-like').where({
						user_id:this.infor.uid,
						comment_id:comment_id,
						article_id:article_id
					}).remove()
					resulte.like_count=(resulte.like_count?resulte.like_count:0)-1
					// data清除数据，保持数据更新
					let comment_index=data.findIndex(item=>item.comment_id==comment_id)
					data.splice(comment_index,1)
					console.log(res,'评论取消点赞')
				}else{//没点过赞
					// 新增1
					add.addInc('opendb-news-comments','like_count',comment_id,1)
					let res=await db.collection('comments-like').add({
						user_id:this.infor.uid,
						comment_id:comment_id,
						article_id:article_id,
						islike:true
					})
					resulte.like_count=(resulte.like_count?resulte.like_count:0)+1
					// data新增数据，保持数据更新
					data.push({
						user_id:this.infor.uid,
						comment_id:comment_id,
						article_id:article_id,
						islike:true
					})
					console.log(res,'评论增加点赞')
				}
			},
			// 根据用户角色筛选用户id
			test(){
				// db.collection('uni-id-roles,uni-id-users').where("role_id =='admin'")
				// .field('role_id._id,role_id["uni-id-users"]._id,role_id["uni-id-users"].username,role_id["uni-id-users"].role').get().then(res=>{
				// 	console.log(res)
				// })
				db.collection('uni-id-roles,uni-id-users').where("role_id._value =='admin'")
				.field('role_name,role_id._value,role_id["uni-id-users"]._id,role_id["uni-id-users"].username,role_id["uni-id-users"].role')
				.get().then(res=>{
					console.log(res)
				})
			},
			async handleArtical(id,count,data){// 文章id，文章的点赞总数
				// 查询当前用户是否对该文章点过赞，点过赞，再点击，就是取消点赞；没点过，点击就是新增；
				if(this.islike_count){//点赞过
					console.log('取消点赞')
					// 点赞总数-1，且该用户没有点赞过
					add.addInc('opendb-news-articles','like_count',id,-1).then(res=>{
						console.log(res)
						this.islike_count=false
					})
					// 取消点赞，则删除当前用户下的对应下的数据，否则就在新增点赞那块，先查询是否有过点赞记录，有救修改，乜有就新增；
					db.collection('opendb-news-like').where({
						article_id:id,
						user_id:this.infor.uid
					}).remove().then(res=>{
						console.log(res)
						data.like_count=data.like_count-1
						// 刷新文章列表数据
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('refreshArtical',{article_id:id,type:'dianzan',handleType:'reduce'});
					})
				}else{//没点过攒,点击就要添加点赞；给文章表中点赞总数+1，查询参数为文章id；参数，就点赞总数；
					// 评论表中，添加已经点赞的true。查询参数为文章id，用户id；新增参数为true;
					console.log('添加点赞')
					add.addInc('opendb-news-articles','like_count',id,1).then(res=>{
						this.islike_count=true
					})
					db.collection('opendb-news-like').add({
						user_id:this.infor.uid,
						article_id:id,
						islike_count:true,
					}).then(res=>{
						data.like_count=data.like_count+1
						// 刷新文章列表数据
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('refreshArtical',{article_id:id,type:'dianzan',handleType:'add'});
					})
				}
			},
			commentArtical(id,count,status,userid){
				// console.log(this.$store.getters['user/info'].userInfo._id,userid)
				//  return;
				if(!status){
					uni.showToast({
						title:'禁止评论',
						icon:'none'
					})
					return
				}
			},
			// 完成评论
			complete(id,count,status,data){
				console.log(id,data)
				if(!status){
					uni.showToast({
						title:'禁止评论',
						icon:'none'
					})
					return
				}
				if(!this.comment){
					uni.showToast({
						title:'内容不能为空',
						icon:'none'
					})
					return
				}
				if(this.UserComment){//用户评论过该文章，则再评论，即是修改
					console.log('修改')
					db.collection('opendb-news-comments').where({
						article_id:this._id,
						user_id:this.infor.uid,
						isShow:false
					}).update({
						article_id:id,
						comment_content:this.comment,
						comment_type:0,
						user_id:this.infor.uid,
					}).then(async res=>{
						console.log(res)
						// 刷新评论
						await this.getComment()
					}).catch(err=>{
						console.log(err)
					})
				}else{//用户未评论过该文章，再评论就是新增
					console.log('新增')
					console.log(this.comment)
					// 新增评论，参数：文章id，评论内容，用户id
					db.collection('opendb-news-comments').add({
						article_id:id,// 文章id
						comment_content:this.comment,//文章评论内容
						comment_type:0,//针对文章的回复，
						user_id:this.infor.uid,
					}).then(async res=>{
						console.log(res)
						// 刷新评论表
						await this.getComment()
						// 新增评论，文章列表刷新
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('refreshArtical',{article_id:id,type:'comment',handleType:'add'});
						// 新增评论之后，在文章表中添加一次评论次数
						// db.collection('opendb-news-articles').where({_id:id}).update({
						// 	comment_count:(count?count:0) +1
						// })
						add.addInc('opendb-news-articles','comment_count',id,1).then(res=>{
							console.log(res)
							// 文章评论+1
							data.comment_count=data.comment_count+1
							this.UserComment=true
						}).catch(err=>{
							console.log(err)
						})
					})
				}
				/* 评论清空 */
				this.comment=''
			},
			async handleUpdate(user_id) {
				console.log(user_id,this.infor.uid)
				// return
				let roles=await add.getUserRole(this.infor.uid)
				console.log(roles,user_id,this.infor.uid)
				// 用户自身和管理员或者超管
				if(user_id==this.infor.uid||roles.data.role.includes('USER_ADMIN')||roles.data.role.includes('admin')){
					// 打开修改页面
					uni.navigateTo({
						url: './edit?id=' + this._id,
						events: {
							// 监听修改页面成功修改数据后, 刷新当前页面数据
							refreshData: () => {
								this.$refs.udb.loadData({
									clear: true
								})
							}
						}
					})
				}else{
					uni.showToast({
						title:'非文章用户，不能操作',
						icon:'none'
					})
				}
				
			},
			// 删除文章
			async handleDelete(user_id) {
				let roles=await add.getUserRole(this.infor.uid)
				console.log(roles)
				// 用户自身和管理员或者超管
				if(user_id==this.infor.uid||roles.data.role.includes('USER_ADMIN')||roles.data.role.includes('admin')){
					this.$refs.udb.remove(this._id, {
						success: (res) => {
							// 删除数据成功后跳转到list页面
							uni.navigateTo({
								url: './list'
							})
						}
					})
				}else{
					uni.showToast({
						title:'非文章用户，不能操作',
						icon:'none'
					})
				}
			},
			// 删除文章的评论
			async delComment(type,comment_id,id,index,child_index,result){
				console.log(comment_id,id,index,child_index,result._id)
				// return
				// 删除评论,要将跟评论相关的数据都隐藏掉，还得修改
				let data=await db.collection('opendb-news-comments').doc(comment_id).update({
					isShow:true
				})
				// let data=await db.collection('opendb-news-comments').doc(comment_id).remove()
				console.log(data)
				if(type=='artical_comemnt'){//删除文章的评论
					// 刷新评论表
					await this.getComment()
					// 刷新文章详情
					this.$refs.udb.refresh()
					 // 当前用户删除自己的评论
					this.UserComment=false
					// 删除评论，文章列表刷新
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('refreshArtical',{article_id:id,type:'comment',handleType:'reduce'});
					// 文档的评论被删除，评论次数-1
					add.addInc('opendb-news-articles','comment_count',id,-1).then(res=>{
						console.log(res)
					})
				}else{//删除评论的回复
					this.commentList[index].children.splice(child_index,1)
					// 一级评论相关的总数-1
					add.addInc('opendb-news-comments','secondComment',result._id,-1)
					result.secondComment-=1
				}
			},
			// 针对某条评论的回复
			reply(comment_id,article_id,user_id,resulte){
				console.log(comment_id,article_id,user_id,resulte,this.commentList)
				// return
				let data={
					comment_id:comment_id,
					article_id:article_id,
					user_id:user_id,
				}
				uni.navigateTo({
					url:'/pages/opendb-news-articles/reply?data='+JSON.stringify(data),
					events: {
					    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					    acceptDataFromOpenedPage:async data=> {
					      console.log(data,'评论列表刷新')
						  let comment_index=this.commentList.findIndex(item=>item._id==data.comment_id)
						  if(data.type=='dianzan'){//对评论的点赞操作
							this.commentList[comment_index].like_count?this.commentList[comment_index].like_count:0
							 if(data.handleType=='add'){
								 this.commentList[comment_index].like_count+=1
								 this.commentList[comment_index].commetLike.push(data.extroinfo)
							 }else{
								this.commentList[comment_index].like_count-=1
								let index=this.commentList[comment_index].commetLike.findIndex(item=>item.user_id==data.extroinfo.user_id)
								this.commentList[comment_index].commetLike.splice(index,1)
							 }
						  }else{// 新增评论
							 // 刷新评论表
							 await this.getComment() 
						  }
					    }
					},
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 10px;
		.comment_container{
			margin-top: 30rpx;
			.comment-item{
				display: flex;
				align-items: flex-start;
				margin-top: 30rpx;
				.comment_avatar {
					.image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
				.comment_infor{
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					.top{
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						
					}
					.content{
						overflow: hidden;
						display:-webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						margin: 20rpx 0;
					}
					.otherinfor{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.ip{
							margin: 0 20rpx;
						}
						.reply{
							min-width: 120rpx;
							padding:0 16rpx;
							height:40rpx;
							border-radius: 16rpx;
							background-color: #f5f5f5;
							text-align: center;
							color: #1f1f1f;
							.reply_text{
								margin-left: 10rpx;
							}
						}
					}
					.reply_comment{
						display: flex;
						align-items: flex-start;
						margin-top: 30rpx;
						border-bottom:1px solid #f8f8f8;
						.comment_avatar {
							.image{
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
							}
						}
						.comment_infor{
							flex: 1;
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							.top{
								display: flex;
								align-items: center;
								justify-content: space-between;
								width: 100%;
								
							}
							.content{
								overflow: hidden;
								display:-webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 3;
								margin: 20rpx 0;
							}
						}
					}
					
				}
			}
		}
		
	}
	.checkreply{
		text-align:center;
		color:green;
	}
	.articalReply{
		padding:20rpx 0;
		color:red;
	}
	.icon{
		vertical-align:text-bottom;
	}
	.font_title{
		color:#858585;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		max-width: 200rpx;
	}
	.active{
		color: red;
	}
	.btns {
		margin-top: 10px;
		display: flex;
		flex-direction: row;
		button {
			flex: 1;
		}
		.btn-delete {
			margin-left: 10px;
		}
	}
	
</style>
